<template>
  <div>
    <group title="店名">
      <x-input title="店名" name="mobile" placeholder="" keyboard="number" is-type="china-mobile"></x-input>
    </group>
    <group title="选择分类">
      <selector v-model="value1" title="分类" :options="plainList" @on-change="onChange"></selector>
    </group>
    <group title="填写您的联系方式">
      <x-input title="联系电话" name="mobile" placeholder="请输入联系电话" keyboard="number" is-type="china-mobile"></x-input>
    </group>


    <!-- <br> -->
    <!-- <group&#45;title>异步加载及动态改变数据</group&#45;title> -->
    <!-- <picker :data='years001' v&#45;model='year001' @on&#45;change='change'></picker> -->
    <!-- <br> -->
    <!-- <group> -->
      <!-- <cell title="current value" :value="year001"></cell> -->
    </group>
    <!-- <x&#45;button type="primary" @click.native="changeValue([['1','3','5','7','9','11'],['2','3','4','5'],['a','b','c']])">Set Data1</x&#45;button> -->
    <!-- <x&#45;button type="primary" @click.native="changeValue([['1','3','5','7','9','11'],['2','3','4','5']])">Set Data1</x&#45;button> -->
    <!-- <x&#45;button type="primary" @click.native="changeValue([['2','4','6','8','10','11']])">Set Data2</x&#45;button> -->
    <br>

<group>
      <x-address title="二级省市" v-model="value3" raw-value :list="addressData"></x-address>
    </group>

<group title="地址">
      <x-input title="地址" name="mobile" placeholder="" keyboard="number" is-type="china-mobile"></x-input>
    </group>
    <!-- <group title="验证码" class="weui&#45;cells_form"> -->
    <!--   <x&#45;input title="验证码" class="weui&#45;cell_vcode"> -->
    <!--     <img slot="right" class="weui&#45;vcode&#45;img" src="http://weui.github.io/weui/images/vcode.jpg"> -->
    <!--   </x&#45;input> -->
    <!--   <x&#45;input title="发送验证码" class="weui&#45;vcode"> -->
    <!--     <x&#45;button slot="right" type="primary" mini>发送验证码</x&#45;button> -->
    <!--   </x&#45;input> -->
    <!-- </group> -->

    <!-- <group title="check if value is valid when required===true"> -->
    <!--   <x&#45;input title="message" placeholder="I'm placeholder" ref="input01" required></x&#45;input> -->
    <!--   <cell title="click to get valid value" :value="'$valid value:' + valid1" @click.native="getValid1"></cell> -->
    <!-- </group> -->
    <!--  -->
    <!--  <group title="check if value is valid when required===false"> -->
    <!--   <x&#45;input title="message" placeholder="I'm placeholder" :required="false" ref="input02" @click.native="getValid2"></x&#45;input> -->
    <!--   <cell title="click to get valid value" :value="'$valid value:' + valid2" @click.native="getValid2"></cell> -->
    <!-- </group> -->
<group title="店铺介绍">
      <x-textarea :max="20" placeholder="请填写详细信息" @on-focus="onEvent('focus')" @on-blur="onEvent('blur')"></x-textarea>
    </group>
  </div>
</template>

<script>
import { XInput, Group, XButton, Cell,Selector , Picker, GroupTitle , XTextarea, XAddress, ChinaAddressV3Data} from 'vux'

export default {
  components: {
    XInput,
    XButton,
    Group,
    Cell,
    Selector,
    Picker,
    GroupTitle,
XTextarea,
XAddress, ChinaAddressV3Data
  },
  data () {
    return {

      // years: [years],
      years001: [],
      // year001: [],
      // years1: [years, [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]],
      // year1: [''],
      // year2: ['2002'],
      // year3: ['2005'],
      // year4: ['2002', '4'],
      // year5: '2005',
      // year6: [
      //   ['你', '我', '他'],
      //   ['you', 'I', 'him'],
      //   ['ni', 'wo', 'ta'],
      //   [1, 2, 3, 4, 5],
      //   [5, 4, 3, 2, 1]
      // ],
      // year6Value: ['我', 'him', 'ni', '1', '2'],
       plainList: ['art', 'foods'],
 value3: ['广东省', '中山市', '--'],
addressData: ChinaAddressV3Data,
      value1: 'foods',
      password: '123465',
      password2: '',
      valid1: false,
      valid2: false,
      iconType: '',
      be2333: function (value) {
        return {
          valid: value === '2333',
          msg: 'Must be 2333'
        }
      },
      style: '',
      disabledValue: 'hello',
      debounceValue: '',
      maxValue: '',
      year001: []
    }
  },
  methods: {

      onEvent (event) {
        console.log('on', event)
      },
    onChange (val) {
    console.info(val);},
    // changeValue (value) {
    //   this.years001 = value
    // },
    getValid1 () {
      this.valid1 = this.$refs.input01.valid
    },
    getValid2 () {
      this.valid2 = this.$refs.input02.valid
    },
    change (val) {
      console.log(val)
    },
    onBlur (val) {
      console.log('on blur', val)
    },
    onFocus (val) {
      console.log('on focus', val)
    }
  }
}
</script>
<style scoped>
.red {
  color: red;
}
.green {
  color: green;
}
</style>
